<script lang="ts">
import Comp1 from "./components/comp1/index.vue";
//  options （选项式） Api
export default {
  components: {
    Comp1,
  },
  // 状态数据
  data() {
    return {
      count: 1,
      show: true,
    };
  },
  // 计算属性
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
  // 监听属性
  watch: {
    count(newValue, oldValue) {
      console.log("Count的值发生了改变", `从${oldValue}变化为了${newValue}`);
    },
  },
  // 方法
  methods: {
    addCount() {
      this.count++;
    },
  },
  // 生命周期
  // 实例化
  beforeCreate() {
    console.log("实例创建之前");
  },
  created() {
    console.log("实例创建之后");
    //  一般来说在这里 可以发送ajax请求
    // 请回来回之后， 通过修改this上面的数据就可以视图
  },
  // 挂载
  beforeMount() {
    console.log("组件挂载前");
    console.log(document.querySelector(".active"));
  },
  mounted() {
    console.log("组件挂载完毕");
    console.log(document.querySelector(".active"));
    // 在这里 一般就可以DOM操作了， 还可以请求数据
  },
  // 更新
  // beforeUpdate() {
  //   console.log("数据更新， 视图更新前");
  //   console.log("count", this.count);
  //   console.log(document.querySelector(".active").innerHTML);
  // },
  // updated() {
  //   console.log("数据更新， 视图更新后");
  //   console.log("count", this.count);
  //   console.log(document.querySelector(".active").innerHTML);
  // },
  // 销毁
  beforeUnmount() {
    console.log("卸载前");
    console.log(this);
  },
  unmounted() {
    console.log("卸载前");
    console.log(this);
  },
};
</script>

<template>
  <div>
    <h1>学习 Vue3</h1>
    <h4 class="active">count: {{ count }}</h4>
    <h4>doubleCount: {{ doubleCount }}</h4>
    <button @click="addCount">+1</button>
    <hr />
    <button @click="show = !show">点我</button>
    <Comp1 v-if="show" />
  </div>
</template>

<!-- Vue2 只支持 选项式Api -->
<!-- Vue3 支持   选项式Api  和  组合Api -->
<style scoped></style>
